@import url("../../styles/publicStyle.less");

.questions-answers-container {
  .widthAndHeight(100%, calc(100% - 230px));
  // width: 100%;
  // flex: 1;
  .contentOverflowRoll();
  padding: 48px 20px 0 20px;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    display: none;
  }

  .preset-key-words {
    .preset-key-words-item {
      margin-bottom: 28px;

      .preset-key-words-item-title {
        .flex();
        .DetailsText();
        margin-bottom: 28px;

        img {
          .widthAndHeight(34px, 38px);
          margin-right: 5px;
        }
      }

      .preset-key-words-item-list {
        display: flex;
        flex-wrap: wrap;

        li {
          .DetailsInfoTitle();
          .textGather(auto, 64px);
          // border: 4px solid @AssistLightGrey;
          box-shadow: 0 0 4px @AssistLightGrey;
          border-radius: 32px;
          color: @ContentText;
          padding: 0 20px;
          margin: 0 20px 20px 0;
        }
      }
    }
  }

  .questions-answers-list {

    .robot-active {
      color: @AssistTextA;
    }

    .questions,
    .answers {
      position: relative;
      display: flex;
      margin-bottom: 24px;

      .questions-answers-time {
        .PromptInfo();
        color: @ContentText;
        position: absolute;
        left: 50%;
        top: 30px;
        transform: translateX(-50%);
        z-index: 9;
      }

    }

    .receive {
      padding-top: 60px;

      .questions-answers-time {
        top: 15px;
      }
    }

    .questions {
      padding-top: 90px;

    }

    .user,
    .robot {
      position: relative;

      .robot-name,
      .user-name {
        position: absolute;
        width: 96px;
        font-size: 30px;
        text-align: center;
        padding: 20px 0;
        z-index: 9;
      }

      .robot-logo,
      .user-logo {
        .widthAndHeight(96px, 96px);
        border-radius: 50%;
        overflow: hidden;
      }
    }

    .robot-text,
    .user-text {
      .DetailsInfoTitle();
      max-width: 64%;
      padding: 24px 16px;
      word-break: break-all;
    }

    .answers {
      .robot-logo {
        position: relative;
        .background(url("@{images}/answers_bg.png"));

        img {
          .widthAndHeight(96px, 86px);
          position: absolute;
          left: 0;
          top: 20px;
        }
      }

      .robot-text {
        .background(url("@{images}/answers_bg.png"));
        border-radius: 0 16px 16px;
        margin: 30px 0 0 20px;

        &.robot-text-padding{
          padding-bottom: 40px;
        }

        .robot-text-title{
          width:intrinsic;
          width: -moz-max-content;
          width: -webkit-max-content;
          max-width: 101%;
          height: 60px;
          line-height: 60px;
          overflow: hidden;
          text-align: center;
          color: #fff;
          padding: 5px 10px;
          margin-top: -22px;
          margin-left: -14px;
          margin-bottom: 30px;
          border-radius: 6px;
          background: linear-gradient(135deg, #3052ff, #67a8ff);
        }

        .queModuleTitle+ul {
          li {
            text-indent: 2em;
          }
        }

        .mr-top {
          margin-top: 10px;
        }

        .clickMore {
          text-align: center;
          margin: 20px 0;
        }

        .riskAtlasOverflow {
          max-height: 300px;
          overflow: hidden;
        }

        .complianceAdviceOverflow {
          max-height: 500px;
          overflow: hidden;
        }

        .ans-content {
          label {
            font-weight: 600;
            line-height: 70px;
          }
        }
      }
    }

    .questions {
      justify-content: flex-end;

      .user-logo {
        img {
          .widthAndHeight(100%, 100%);
        }
      }

      .user-text {
        .background(url("@{images}/questions_bg.png"));
        border-radius: 16px 0 16px 16px;
        margin-top: 30px;
        margin-right: 16px;
      }
    }
  }
}
